<template>
  <div :class="GLOBAL_THEME === 'light' ? '' : 'inc-boder'">
    <div class="inc-boder-child"></div>
    <slot></slot>
  </div>
  <!-- <dv-border-box-10 :color="boxColor" > -->

  <!-- </dv-border-box-10> -->
</template>

<script>
import { createNamespacedHelpers } from "vuex";

const { mapMutations } = createNamespacedHelpers("mes/");
export default {
  name: "datavBorder",
  props: {
    boxColor: {
      //边框颜色
      type: Array,
      default: () => ["#0C265D", "#038BFF"],
    },
    boxBg: {
      type: String, //边框背景色
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {
    GLOBAL_THEME() {
      return this.$store.state.mes.GLOBAL_THEME;
    },
  },
  methods: {
    ...mapMutations(["changeGlobalTheme"]),
  },
};
</script>

<style lang="less" scoped>
.inc-boder {
  position: relative;
  // border: 1px solid #26507C;
  border: none;
  background: rgba(0, 33, 80, 0.35);
  border-radius: 10px;
  width: 100%;
  height: 100%;
  &::before {
    position: absolute;
    content: "";
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #5d73a6;
    border-left: 1px solid #5d73a6;
    border-radius: 10px 0 0 0px;
  }
  &::after {
    position: absolute;
    content: "";
    top: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #5d73a6;
    border-right: 1px solid #5d73a6;
    border-radius: 0px 10px 0 0px;
  }
  .inc-boder-child {
    position: absolute;
    width: 100%;
    height: 100%;
    &::before {
      position: absolute;
      content: "";
      right: -1px;
      bottom: -1px;
      width: 10px;
      height: 10px;
      border-bottom: 1px solid #5d73a6;
      border-right: 1px solid #5d73a6;
      border-radius: 0 0 10px 0;
    }
    &::after {
      position: absolute;
      content: "";
      bottom: -1px;
      left: -1px;
      width: 10px;
      height: 10px;
      border-left: 1px solid #5d73a6;
      border-bottom: 1px solid #5d73a6;
      border-radius: 0 0px 0 10px;
    }
  }
}
</style>
